Stack Navigation এবং Drawer Navigation

Mobile App Development - রিঅ্যাক্ট নেটিভ (React Native) - React Navigation এবং Multi-Screen অ্যাপ্লিকেশন তৈরি

229

Stack Navigation এবং Drawer Navigation হল React Navigation-এ ব্যবহৃত দুটি জনপ্রিয় নেভিগেশন পদ্ধতি। প্রতিটি পদ্ধতির লক্ষ্য আলাদা এবং বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়। নিচে এই দুটি নেভিগেশনের মধ্যে পার্থক্য এবং তাদের ব্যবহার তুলে ধরা হয়েছে:

১. Stack Navigation

Stack Navigation হল এমন একটি নেভিগেশন পদ্ধতি যেখানে একে অপরের উপর পৃষ্ঠাগুলির স্তক (stack) তৈরি করা হয়। প্রতিটি নতুন স্ক্রীন সেরকম আগের স্ক্রীনের উপর স্ট্যাক হয়, এবং পিছনে ফিরে যাওয়ার (back) অপশন থাকে। এটি মোবাইল অ্যাপ্লিকেশনে সাধারণত ব্যবহৃত হয়, যেখানে আপনি একটি স্ক্রীন থেকে অন্য স্ক্রীনে যেতে পারেন এবং আগের স্ক্রীনে ফিরে যেতে পারবেন।

মূল বৈশিষ্ট্যসমূহ:

পৃষ্ঠার স্তক (stack): নতুন স্ক্রীনকে আগের স্ক্রীনের উপর স্ট্যাক করা হয়।
পিছনে ফিরে যাওয়া (Back): আপনি সাধারণত একটি স্ক্রীন থেকে আরেকটি স্ক্রীনে যেতে পারেন এবং আগের স্ক্রীনে ফিরে যাওয়ার জন্য একটি ব্যাক বাটন থাকে।
রুটের সমন্বয়: প্রতিটি স্ক্রীন একটি নির্দিষ্ট রুট হিসাবে সংজ্ঞায়িত হয় এবং আপনি পুশ এবং পপ অপারেশন দিয়ে স্ক্রীন পরিচালনা করতে পারেন।
উদাহরণ: লগইন, হোম, ডিটেইল পেজ ইত্যাদি।

উদাহরণ:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

২. Drawer Navigation

Drawer Navigation হল একটি সাইড নেভিগেশন প্যানেল, যা সাধারণত একটি স্ক্রীনের পাশ থেকে স্লাইড করে আসে। এটি মোবাইল অ্যাপ্লিকেশন এবং ডেস্কটপ অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়, যেখানে ব্যবহারকারীকে নেভিগেশন মেনু অ্যাক্সেস করতে দেয়। এটি সাধারণত অ্যাপের প্রধান স্ক্রীনের সাথে সম্পর্কিত অন্যান্য স্ক্রীন বা ফিচারের জন্য ব্যবহার করা হয়।

মূল বৈশিষ্ট্যসমূহ:

সাইড নেভিগেশন মেনু: সাধারণত স্ক্রীনের একপাশ থেকে আউট স্লাইড করে এবং এতে অ্যাপের অন্যান্য স্ক্রীন বা ফিচার থাকে।
বিভিন্ন স্ক্রীন সরলভাবে অ্যাক্সেস করা: ব্যবহারকারী অ্যাপের বিভিন্ন অংশে সহজেই নেভিগেট করতে পারে।
টগল এবং স্বাইপ: আপনি এক্সপ্যান্ড বা টগল করার জন্য মেনুটি স্লাইড করে আনতে পারেন, অথবা স্বাইপিং দিয়ে মেনু চালু করতে পারেন।
উদাহরণ: অ্যাপের হোম, প্রোফাইল, সেটিংস, লগআউট ইত্যাদি অপশন।

উদাহরণ:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}